<template>
  <el-dialog title="选择论坛版主" :visible.sync="dialogVisible" @close="$emit('update:visible',false)" width="50%">
    <!--checkType 1 查看详情 2 编辑-->
    <el-table
            ref="multipleTable"
            :data="arryList"
            :stripe="tableStyle.tableStripe"
            :border="tableStyle.tableBorder"
            tooltip-effect="dark"
            header-cell-class-name="table-text-c"
            style="width: 100%"
            height="500"
            @row-click="rowClick">
      <el-table-column width="50">
        <template slot-scope="scope"><el-radio v-model="radio" :label="scope.row.id" class="radioCheckBox">{{scope.row.id}}</el-radio>
        </template>
      </el-table-column>
      <el-table-column
              align="center"
              prop="realname"
              label="姓名"
              width="100">
      </el-table-column>
      <el-table-column
              align="center"
              prop="section_name"
              label="年段">
        <template slot-scope="scope">
          <span v-if="!scope.row.section" class="notborrow">未定义</span>
          <span v-else>{{scope.row.section.section_name}}</span>
        </template>
      </el-table-column>
      <el-table-column
              prop="class_name"
              label="班级"
              align="center">
        <template slot-scope="scope">
          <span v-if="!scope.row.classes" class="notborrow">未定义</span>
          <span v-else>{{scope.row.classes.class_name}}</span>
        </template>
      </el-table-column>
      <el-table-column
              prop="role"
              label="角色"
              align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.role">{{scope.row.role.name}}</span>
          <span v-else class="notborrow">未定义</span>
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24" class="toolbar">
      <el-pagination
              background
              layout="prev, pager, next"
              :total="page.total"
              :page-size="page.pagesize"
              @current-change="handleSizeChange">
      </el-pagination>
    </el-col>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('update:visible',false)" size="small">取 消</el-button>
      <el-button type="primary" @click="userlistGet()" size="small">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import {pagination, tableoption} from '@/utils/util.js'
  import api from '@/utils/api.js'

  export default {
    name: 'Dialog',
    props: ['visible', 'eidtOption', 'checkType'],
    watch: {
      visible () {
        this.dialogVisible = this.visible
        if (this.visible) {
          console.log('打开了')
          this.InitFn()
        }
      }
    },
    data () {
      return {
        radio: null,
        applyBox: null,
        dialogVisible: false,
        arryList: [],
        tableStyle: tableoption,
        // 设置table页面分页所需
        page: {
          pageindex: pagination.pageIndex,
          pagesize: pagination.pageSize,
          total: pagination.total
        }
      }
    },
    created () {
    },
    methods: {
      // 获取年段班级信息
      InitFn () {
        this.$fetch(api.admin_user_index, {p: this.page.pageindex}).then((response) => {
          if (response.code === 0) {
            this.arryList = response.list.data
            this.page.total = response.list.total
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      // 行选中
      rowClick (option) {
        console.log('行点击:', option)
        this.radio = option.id
        this.applyBox = option
      },
      handleSizeChange (val) {
        this.page.pageindex = val
        this.InitFn()
      },
      userlistGet () {
        if (this.applyBox) {
          this.$emit('initFile', this.applyBox)
          this.dialogVisible = false
          this.radio = null
        } else {
          this.$message.error('请选择论坛版主')
        }
      }
    }
  }
</script>

